<template>
  <div class="type">
    <div class="nav">
      <ul class="menu">
        <li :class="{active : index ==active}"  v-for="(item,index) in type" @click="menu_toggle(index)">{{item}}</li>
      </ul>
      <ul class="second_type">
        <li @click='detail()'><img src="../../../public/images/type/type.png"/><p>大米</p></li>
        <li><img src="../../../public/images/type/type.png"/><p>大米</p></li>
        <li><img src="../../../public/images/type/type.png"/><p>大米</p></li>
        <li><img src="../../../public/images/type/type.png"/><p>大米</p></li>
        <li><img src="../../../public/images/type/type.png"/><p>大米</p></li>
        <li><img src="../../../public/images/type/type.png"/><p>大米</p></li>
        <li><img src="../../../public/images/type/type.png"/><p>大米</p></li>
        <li><img src="../../../public/images/type/type.png"/><p>大米</p></li>
        <li><img src="../../../public/images/type/type.png"/><p>大米</p></li>
        <li><img src="../../../public/images/type/type.png"/><p>大米</p></li>
        <li><img src="../../../public/images/type/type.png"/><p>大米</p></li>
        <li><img src="../../../public/images/type/type.png"/><p>大米</p></li>
        <li><img src="../../../public/images/type/type.png"/><p>大米</p></li>
        <li><img src="../../../public/images/type/type.png"/><p>大米</p></li>
      </ul>
    </div>

    <mt-footer></mt-footer>
  </div>
</template>

<script>
export default {
  data(){
    return{
        active:'',
        type:['时令水果 新鲜蔬菜','饮料冲调 茶水牛奶','肉禽蛋品 海鲜水产','休闲小吃 零食坚果','时令水果 新鲜蔬菜','饮料冲调 茶水牛奶','肉禽蛋品 海鲜水产','休闲小吃 零食坚果']
    }
  },
  methods:{
    menu_toggle(index){
      this.active=index;
    },
    detail(){
      this.$router.push({path:'/shop'});
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .nav{display: flex;justify-content: space-between;}
  .nav .menu li{background-color: #F2F2F2;padding: 0.4rem;font: 0.28rem/0.4rem '微软雅黑';color: #666666;width: 1.4rem;text-align: center;}
  .nav .menu .active{color: #67BA43;position: relative;}
  .nav .menu .active::before{content: '';width: 0.06rem;height: 0.7rem;background-color:#67BA43;top: 0.45rem;left: 0;position: absolute;}
  .nav .second_type{flex:1;}
  .nav .second_type li{padding: 0.1rem;overflow: hidden;width: 1.4rem;float: left;}
  .nav .second_type li img{width:1.4rem;height: 1.4rem;}
  .nav .second_type li p{font: 0.24rem/0.5rem '微软雅黑';color: #666666;text-align: center;}
</style>
